<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>济南市检察机关办案评价分析系统</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="./js/echarts.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="container">
			<div class="top">
				<div class="top_title">
					<h3>济南市检察机关办案评价分析系统</h4>
						<div class="contols" id="contols">
							数据分析
						</div>
						<div class="quanping" id='qp'>
							<img src="img/qp.png">
							<span>全屏</span>
						</div>
						<div class="quanping1" id='tcqp'>
							<img src="img/qp.png">
							<span>退出全屏</span>
						</div>
						<div class="logout" id="logout">
							<img src="img/tc.png">
							<span>退出</span>
						</div>

				</div>

			</div>
			<div class="center">
				<div class="left">
					<div class="charts_title">
						<div class="charts_title_img reset_width">
							<div><p>市院排名</p><p>(截止3月2日)</p>
							
							</div>
						</div>
						<div class="tt_left">
							<div id="table1" class="container shiyuan">
								<table cellspacing="0" cellspacing="0">
									<thead>
										<tr>
											<th>序号</th>
											<th>名称</th>
											<th>数量</th>
										</tr>
									</thead>
									<tbody id="sort_table_data">

									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
				<div class="aside">
					<div class="charts_title">
						<div class="charts_title_img reset_width">
							<div><p>区院排名</p><p>(截止3月12日)</p></div>
						</div>
						<div class="tt_left">
							<div id="table1" class="container rt">
								<table cellspacing="0" cellspacing="0">
									<thead>
										<tr>
											<th>序号</th>
											<th>名称</th>
											<th>数量</th>
										</tr>
									</thead>
									<tbody id="sort_table_data_yuan">

									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
				<div class="right">
					<div class="charts_titles posi">
						<div class="anjian_left">
							<span>正在办理案件数量</span>
							<span>22</span>
						</div>
						
						<div class="anjian_left">
						<span>正在办理案件数量</span>
						<span>22</span>
						</div>
						<div class="anjian_left">
							<span>正在办理案件数量</span>
							<span>22</span>
						</div>
					</div>
					<div class="right1">
						<div class="chart_top">
							<div class="charts_title">
								<div class="charts_title_img">
									<div>案件比管理</div>
								</div>
							</div>
							<div class="posi">
								<div class="chart_1" id="chart_1">
					
								</div>
								<div class="anjianbi">案件比</div>
							</div>
							<div class="posi">
								<div class="chart_2" id="chart_2">
					
								</div>
								<div class="anjianbi" style="left: 60px;">案件数量</div>
							</div>
					
						</div>
						<div class="chart_bottom">
							<div class="charts_title posi">
								<div class="charts_title_img">
									<div>案件管理</div>
								</div>
							</div>
							<div class="tableData">
								<div class="tt">
									<div id="table1" class="container">
										<table cellspacing="0" cellspacing="0">
											<thead style="padding-top:10px;">
												<tr>
													<th>序号</th>
													<th>名称</th>
													<th>数量</th>
													<th>占比</th>
					
												</tr>
											</thead>
											<tbody id="table_data1">
					
											</tbody>
										</table>
									</div>
								</div>
					
							</div>
						</div>
					</div>
				</div>

			</div>
			<!-- //弹框 -->
			<div id="myModal" class="modal">
				<!-- Modal content -->
				<div class="modal-content">

					<div class="modal-header">
						<span class="modal_title" id="modal_title"></span>
					</div>
					<div class="x">
						<img src="img/x.png" id="cancel" style="width: 38px;height: 38px;">
					</div>
					<div class="dialog_content_table">
						<div class="dialog_header">
							<span>指标</span>
							<span>得分</span>
							<span>排名</span>
						</div>

						<div class="dialog_c ov" id="cityUnit">

						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			//zhu
			window.onload = function() {
				echartsBarData()
				echartsLineData()
				tableData()
				sortData()
				sort_table_data_yuan()
			}

			function sort_table_data_yuan() {
				var data = [{
						name: '历下区人民检查院',
						score: '89',
						sort: '01'
					},
					{
						name: '市中区人民检查院',
						score: '89',
						sort: '01'

					},
					{
						name: '槐荫区人民检查院',
						score: '89',
						sort: '01'

					},
					{
						name: '天桥区人民检查院',
						score: '89',
						sort: '01'

					},
					{
						name: '历城区人民检查院',
						score: '89',
						sort: '012'

					}, {
						name: '长清区人民检查院',
						score: '89',
						sort: '01'

					}, {
						name: '章丘区人民检查院',
						score: '89',
						sort: '01'

					}, {
						name: '济阳区人民检查院',
						score: '89',
						sort: '01'

					}, {
						name: '莱芜区人民检查院',
						score: '89',
						sort: '01'

					}, {
						name: '钢城区人民检查院',
						score: '89',
						sort: '01'

					}, {
						name: '先行区人民检查院',
						score: '89',
						sort: '01'

					}, {
						name: '商河县人民检查院',
						score: '89',
						sort: '01'

					}, {
						name: '平阴区人民检查院',
						score: '89',
						sort: '01'

					}
				]
				for (var i = 0; i < data.length; i++) {
					$('#sort_table_data_yuan').append(
						"<tr>" +
						"<td onClick='tableQu(\"" + data[i].name + ',' + data[i].sort + "\");'>" + data[i].name + "</td>" +
						"<td>" + data[i].score + "</td>" +
						"<td>" + data[i].sort + "</td>" +
						"</tr>");
				}
			}

			function sortData() {
				var data = [{
						name: '济南市',
						score: '89',
						sort: '01'
					},
					{
						name: '青岛市',
						score: '89',
						sort: '012'

					}, {
						name: '泰安市',
						score: '89',
						sort: '01'

					}, {
						name: '聊城市',
						score: '89',
						sort: '01'

					}, {
						name: '菏泽市',
						score: '89',
						sort: '01'

					}, {
						name: '临沂市',
						score: '89',
						sort: '01'

					}, {
						name: '潍坊市',
						score: '89',
						sort: '01'

					}, {
						name: '东营市',
						score: '89',
						sort: '01'

					}, {
						name: '烟台市',
						score: '89',
						sort: '01'

					}, {
						name: '威海市',
						score: '89',
						sort: '01'

					}, {
						name: '日照市',
						score: '89',
						sort: '01'

					}, {
						name: '淄博市',
						score: '89',
						sort: '01'

					}, {
						name: '滨州市',
						score: '89',
						sort: '01'

					}, {
						name: '德州市',
						score: '89',
						sort: '01'

					}, {
						name: '济宁市',
						score: '89',
						sort: '01'

					}, {
						name: '枣庄市',
						score: '89',
						sort: '01'

					}
				]
				for (var i = 0; i < data.length; i++) {
					$('#sort_table_data').append(
						"<tr>" +
						"<td onClick='tableRate(\"" + data[i].name + ',' + data[i].sort + "\");'>" + data[i].name + "</td>" +
						"<td>" + data[i].score + "</td>" +
						"<td>" + data[i].sort + "</td>" +
						"</tr>");
				}
			}
			//市院弹框
			function tableRate(name) {
				$('#cityUnit').empty()
				var arr = name.split(',') //0名称 1 id
				$("#modal_title").text(arr[0] + '评价指标')
				var data = [{
						name: '刑事检查工作',
						sort: '01',
						pm: '09'
					},
					{
						name: '刑事检查工作',
						sort: '01',
						pm: '09'
					},
					{
						name: '刑事检查工作',
						sort: '01',
						pm: '09'
					},
					{
						name: '刑事检查工作',
						sort: '01',
						pm: '09'
					},
					{
						name: '刑事检查工作',
						sort: '01',
						pm: '09'
					},
					{
						name: '刑事检查工作',
						sort: '01',
						pm: '09'
					},
					{
						name: '刑事检查工作',
						sort: '01',
						pm: '09'
					},
					{
						name: '刑事检查工作',
						sort: '01',
						pm: '09'
					},
					{
						name: '刑事检查工作',
						sort: '01',
						pm: '09'
					},
					{
						name: '刑事检查工作',
						sort: '01',
						pm: '09'
					}
				]
				
				for (var i = 0; i < data.length; i++) {
					$('#cityUnit').append(
						"<div class='dialog_c_tr'>" +
						"<span>" + data[i].name + "</span>" +
						"<span>" + data[i].sort + "</span>" +
						"<span>" + data[i].pm + "</span>" +
						"</div>")
				}
				$("#myModal").show()

			}
			//区院弹框
			function tableQu(name) {
			$('#cityUnit').empty();//
				var arr = name.split(',') //0名称 1 id
				$("#modal_title").text(arr[0] + '评价指标')
				var data = [{
						name: '刑事检查工作',
						sort: '01',
						pm: '09'
					},
					{
						name: '刑事检查工作',
						sort: '01',
						pm: '09'
					},
					{
						name: '刑事检查工作',
						sort: '01',
						pm: '09'
					},
					{
						name: '刑事检查工作',
						sort: '01',
						pm: '09'
					},
					{
						name: '刑事检查工作',
						sort: '01',
						pm: '09'
					},
					{
						name: '刑事检查工作',
						sort: '01',
						pm: '09'
					},
					{
						name: '刑事检查工作',
						sort: '01',
						pm: '09'
					},
					{
						name: '刑事检查工作',
						sort: '01',
						pm: '09'
					},
					{
						name: '刑事检查工作',
						sort: '01',
						pm: '09'
					},
					{
						name: '刑事检查工作',
						sort: '01',
						pm: '09'
					}
				]
				
				for (var i = 0; i < data.length; i++) {
					$('#cityUnit').append(
						"<div class='dialog_c_tr'>" +
						"<span>" + data[i].name + "</span>" +
						"<span>" + data[i].sort + "</span>" +
						"<span>" + data[i].pm + "</span>" +
						"</div>")
				}
				$("#myModal").show()
			}

			function tableData() {
				//$ajax(...)循环放入数据  模拟数据
				var data = [{
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: 'asfjskdfjsldjf',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					},
					{
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: 'asfjskdfjsldjf',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					},
					{
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: 'asfjskdfjsldjf',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: '45%',
						index: '01',
						name: '张三',
						quyuan: '检查院',

					}, {
						id: '45%',
						index: '01',
						name: '张三11',
						quyuan: '检查院',

					},
				]
				for (var i = 0; i < data.length; i++) {
					$('#table_data1').append(
						"<tr>" +
						"<td>" + data[i].index + "</td>" +
						"<td>" + data[i].name + "</td>" +
						"<td>" + data[i].quyuan + "</td>" +
						"<td>" + data[i].id + "</td>" +
						"</tr>");
				}
				$("#table1 tr :nth-child(2)").addClass('selectTable');
			}

			function echartsBarData() {
				var jcTableBar = echarts.init(document.getElementById('chart_1'));
				jcTableBar.setOption({
					color: ['#3398DB'],
					tooltip: {
						formatter: function(v) {
							return v.name + ':' + v.data
						}

					},
					grid: {
						left: '3%',
						right: '6%',
						bottom: '15%',
						containLabel: true
					},
					dataZoom: [
						//滑动条
						{
							show: true,
							height: 8,
							xAxisIndex: [0],
							//调整缩放组件位置
							//top bottom left right
							bottom: 15,
							type: "slider",
							backgroundColor: '#024577',
							"start": 20,
							"end": 80,
							handleIcon: "path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z",
							handleSize: '110%',
							handleStyle: {
								color: "#02D0E7",
							},
							textStyle: {
								color: "#fff",
							},
							fillerColor: "#02D0E7",
							borderColor: "#024577",

						},
					],
					toolbox: { //可视化的工具箱
						show: true,
						top: '10%',
						right: '1%',
						itemGap: 10,
						orient: 'vertical',
						feature: {
							dataView: { //数据视图
								show: true
							},

							saveAsImage: { //保存图片
								show: true
							},
							magicType: { //动态类型切换
								type: ['bar', 'line']
							}
						},
						iconStyle: {
							borderColor: '#fff',
						}
					},
					xAxis: [{
						type: 'category',
						data: ['1-1月', '1-2月', '1-3月', '1-4月', '1-5月', '1-6月', '1-7月', '1-8月', '1-9月', '1-10月', '1-11月', '1-12月'],
						axisTick: {
							alignWithLabel: false
						},
						splitLine: {
							show: false
						},
						axisLine: {
							lineStyle: {
								type: 'solid',
								color: '#00C5F3', //左边线的颜色
								width: '1' //坐标线的宽度
							}
						},
						axisLabel: {
							textStyle: {
								color: '#fff', //坐标值得具体的颜色

							}
						}
					}],
					yAxis: [{
						type: 'value',
						splitLine: {
							show: false
						},
						axisLine: {
							lineStyle: {
								type: 'solid',
								color: '#fff', //左边线的颜色
								width: '1' //坐标线的宽度
							}
						},
						axisLabel: {
							textStyle: {
								color: '#fff', //坐标值得具体的颜色

							}
						}
					}],
					series: [{

							type: 'bar',
							barWidth: '20%',
							data: [10, 52, 200, 334, 390, 330, 220, 10, 52, 200, 334, 390, 330, 220],

							itemStyle: {
								normal: {
									label: {
										show: true, //开启显示
										position: 'top', //在上方显示
										textStyle: { //数值样式
											color: '#fff',
											fontSize: 13
										}
									},
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#00CCFE'
									}, {
										offset: 1,
										color: '#1183DC'
									}]),
								}
							},
						},
						{
							type: 'line',
							smooth: true,
							stack: 'a',
							symbol: 'circle',
							symbolSize: 1,
							sampling: 'average',
							itemStyle: {
								color: '#D59B8A'
							},
							areaStyle: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#D59B8A'
								}, {
									offset: 1,
									color: '#111D52'
								}])
							},
							data: [10, 52, 200, 334, 390, 330, 220, 10, 52, 200, 334, 390, 330, 220],
						}
					]
				})
			}
			//折线图
			//折线图
			function echartsLineData() {
				var jcTableLine = echarts.init(document.getElementById('chart_2'));
				jcTableLine.setOption({
					grid: {
						left: '3%',
						right: '6%',
						top: '25%',
						bottom: '15%',
						containLabel: true
					},
					dataZoom: [
						//滑动条
						{
							show: true,
							height: 8,
							xAxisIndex: [0],
							//调整缩放组件位置
							//top bottom left right
							bottom: 15,
							type: "slider",
							backgroundColor: '#024577',
							"start": 20,
							"end": 80,
							handleIcon: "path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z",
							handleSize: '110%',
							handleStyle: {
								color: "#02D0E7",
							},
							textStyle: {
								color: "#fff",
							},
							fillerColor: "#02D0E7",
							borderColor: "#024577",

						},
					],
					tooltip: {
						formatter: function(v) {

							return v.seriesName + "  " + v.name + ':' + v.data
						}

					},
					legend: {
						data: ['案数', '件数'],
						right: '5%',
						top: '13%',
						textStyle: {
							color: '#fff'
						},
					},
					toolbox: { //可视化的工具箱
						show: true,
						top: '10%',
						right: '1%',
						itemGap: 15,
						orient: 'vertical',
						feature: {
							dataView: { //数据视图
								show: true
							},

							saveAsImage: { //保存图片
								show: true
							},
							magicType: { //动态类型切换
								type: ['bar', 'line']
							}
						},
						iconStyle: {
							borderColor: '#fff',
						}
					},
					xAxis: {
						type: 'category',
						data: ['1-1月', '1-2月', '1-3月', '1-4月', '1-5月', '1-6月', '1-7月', '1-8月', '1-9月', '1-10月', '1-11月', '1-12月'],
						splitLine: {
							show: false,
							lineStyle: {
								color: '#535353',

							}
						},
						axisLabel: {
							textStyle: {
								color: '#fff', //坐标值得具体的颜色

							}
						}
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: '#535353',

							}
						},
						axisLabel: {
							textStyle: {
								color: '#fff', //坐标值得具体的颜色

							}
						}
					},
					series: [{
							name: '案数',
							data: [820, 932, 901, 934, 1290, 1330, 1320, 34, 123, 566, 190, 333],
							type: 'line',
							color: '#C6354D'
						},
						{
							name: '件数',
							data: [1020, 232, 91, 334, 290, 330, 120, 876, 235, 912, 22, 445],
							color: '#593AC1',
							type: 'line'
						}
					]

				})
			}
			$("#qp").click(function() {
				$("#tcqp").show()
				var el = document.documentElement;
				var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
					el.mozRequestFullScreen || el.msRequestFullScreen;
				if (typeof rfs != "undefined" && rfs) {
					rfs.call(el);
				} else if (typeof window.ActiveXObject != "undefined") {
					//for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
					var wscript = new ActiveXObject("WScript.Shell");
					if (wscript != null) {
						wscript.SendKeys("{F11}");
					}
				}
			})
			$("#tcqp").click(function() {
				var el = document;
				var cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
					el.mozCancelFullScreen || el.exitFullScreen;
				if (typeof cfs != "undefined" && cfs) {
					cfs.call(el);
				} else if (typeof window.ActiveXObject != "undefined") {
					//for IE，这里和fullScreen相同，模拟按下F11键退出全屏
					var wscript = new ActiveXObject("WScript.Shell");
					if (wscript != null) {
						wscript.SendKeys("{F11}");
					}
				}
				$("#tcqp").hide()
			})
			$("#contols").click(function() {
				alert('跳转控制台')
			})
			$("#logout").click(function() {
				alert('退出')
			})
			$("#cancel").click(function() {
				$("#myModal").hide()
			})
		</script>
	</body>
</html>
